<template>
  <!-- <h4>当前是设备管理-- 设备基本信息  Facility</h4> -->
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="formInline.type" clearable filterable placeholder="设备类型">
          <el-option label="滚筒洗衣机" value="0"></el-option>
          <el-option label="波轮洗衣机" value="1"></el-option>
          <el-option label="吹风机" value="2"></el-option>
          <el-option label="洗鞋机" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formInline.model" clearable filterable placeholder="联网类型">
          <el-option label="0，无连接" value="0"></el-option>
          <el-option label="1，蓝牙模式" value="1"></el-option>
          <el-option label="2，联网模式" value="2"></el-option>
          <el-option label="3，蓝牙 + 联网模式" value="3"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-select v-model="formInline.model" placeholder="在线模式">
        <el-option label="0，离线" value="0"></el-option>
        <el-option label="1，在线" value="1"></el-option>
    </el-select>
    <el-select v-model="formInline.model" placeholder="工作模式">
        <el-option label="工作中" value="...."></el-option>
    </el-select> -->
      <el-form-item>
        <el-input
          v-model="formInline.math"
          placeholder="设备编号 或者 蓝牙编码 "
        ></el-input>
      </el-form-item>
      <el-form-item>
        <!-- <el-select v-model="formInline.model" :data="selectData" placeholder="项目">
          <el-option v-for="(list,i) in selectData"  :value="projectid">{{list.projectName}}</el-option>
        </el-select> -->
         <el-select v-model="formInline.project" clearable filterable placeholder="请选择项目" >
          <el-option
            v-for="item in selectData"
            :key="item.projectid"
            :label="item.projectName"
            :value="item.projectid" />
        </el-select>
      </el-form-item>
      <el-form-item>
           <el-input
          v-model="formInline.address"
          placeholder="设备投放位置"
        ></el-input>
        
      </el-form-item>
     
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dialogVisible = true">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dialogClaim = true">设备认领</el-button>
      </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="exportData" >导入数据</el-button>
       </el-form-item>
        <el-form-item>
      <!-- <el-button
        type="primary"
        v-action:export
        @click="exportData"
      >数据导出</el-button> -->
        <download-excel
             :data   = "tableData"
             :fields = "json_fields"
             type    = "csv"
             worksheet = "My Worksheet"
             name    = "设备信息.xls">
         <!-- <el-button type="success"> VUE下载订单信息  </el-button> -->
          <el-button type="success"  icon="el-icon-download"   >VUE导出</el-button>
     </download-excel>
   </sd-button-group>
      </el-form-item>
                  <!-- <el-upload
                      class="upload-demo"
                      name="file"
                      action="/tFacilityBase/importExecl"
                      :with-credentials="true" 
                      :on-change="handleChange"
                      :file-list="fileList"
                      :limit="1"
                      :on-exceed="handleExceed"
                      :on-preview="handlePreview"
                      accept=".xlsx"
                      :auto-upload="true"
                      >
                      <el-button size="mini" style="border-radius:25px;">
                        <i class="el-icon-upload2"/>点击上传</el-button>
                      <div slot="tip" class="el-upload__tip">一次只能上传一个文件，文件大小不可超过20M</div>
                  </el-upload> -->
             <!-- <el-upload
                        class="upload-demo"
                        action="/tFacilityBase/importExecl"
                        :on-success="upload_success"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                    <el-button  type="primary">点击导入Excel文件</el-button>
                </el-upload> -->


    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="number" label="编号">
        <template slot-scope="scope">
          <el-button @click="handleClicknumber(scope.row)" type="text" size="big">{{scope.row.number}}</el-button>
     
        </template>
      </el-table-column>
      <el-table-column prop="manufactors" label="厂商"> </el-table-column>
      <el-table-column prop="types" label="设备类型"> </el-table-column>
      <el-table-column prop="models" label="联网状态"> </el-table-column>
      <!-- <el-table-column prop="status" label="是否启用"></el-table-column> -->
      	<el-table-column
					prop="status"
					label="是否启用">
				<template slot-scope="scope">
					<el-tag size="small" v-if="scope.row.status === 1" type="success">已启用</el-tag>
					<el-tag size="small" v-else-if="scope.row.status === 0" type="danger">已禁用</el-tag>
				</template>

			</el-table-column>
      <el-table-column prop="projectName" label="项目"> 
         <template slot-scope="scope">
          <el-button @click="handleClickProject(scope.row)" type="text" size="big">{{scope.row.projectName}}</el-button>
     
        </template>
      </el-table-column>
      <el-table-column prop="address" label="投放位置"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="big"
            >编辑项目</el-button
          >
          <template>
						<el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleDelete(scope.row.id)">
							<el-button type="text" slot="reference">删除</el-button>
						</el-popconfirm>
					</template>
         
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[5,10, 15, 20, 30]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
     <!--新增对话框-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
    >
    <!-- :rules="editFormRules" -->
      <el-form :model="editForm" :rules="editFormRules"  ref="editForm">
        <el-form-item label="设备编号：" prop="number" label-width="100px">
          <el-input
            v-model="editForm.number"
            autocomplete="off"
          ></el-input>
         
        </el-form-item>

        <el-form-item label="设备类型:" prop="type" label-width="100px">
           <el-select v-model="editForm.type" clearable filterable placeholder="设备类型">
          <el-option label="滚筒洗衣机" value="0"></el-option>
          <el-option label="波轮洗衣机" value="1"></el-option>
          <el-option label="吹风机" value="2"></el-option>
          <el-option label="洗鞋机" value="3"></el-option>
        </el-select>
        </el-select>
        </el-form-item>
        <el-form-item label="设备厂商:" prop="manufactor" label-width="100px">
           <el-select v-model="editForm.manufactor" clearable filterable placeholder="设备厂商">
          <el-option label="创维" value="0"></el-option>
          <el-option label="海尔" value="1"></el-option>
        </el-select>
        </el-form-item>
          <el-form-item label="联网类型:" prop="model" label-width="100px">
           <el-select v-model="editForm.model" clearable filterable placeholder="联网类型">
          <el-option label="0，无连接" value="0"></el-option>
          <el-option label="1，蓝牙模式" value="1"></el-option>
          <el-option label="2，联网模式" value="2"></el-option>
          <el-option label="3，蓝牙 + 联网模式" value="3"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="项目：" prop="projectid" label-width="100px">
          <el-select v-model="editForm.projectid" clearable filterable placeholder="请选择项目" >
          <el-option
            v-for="item in selectData"
            :key="item.projectid"
            :label="item.projectName"
            :value="item.projectid" />
        </el-select>
        </el-form-item>
       <el-form-item label="状态"  prop="status" label-width="100px">
					<el-radio-group v-model="editForm.status">
						<el-radio :label="0">禁用</el-radio>
						<el-radio :label="1">正常</el-radio>
					</el-radio-group>
				</el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('editForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('editForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  <!--设备认领对话框-->
     <el-dialog
      title="提示"
      :visible.sync="dialogClaim"
      width="600px"
      :before-close="handleClaim"
    >
    <!-- :rules="editFormRules" -->
      <el-form :model="claimForm" :rules="claimFormRules"  ref="claimForm">
        <el-form-item label="设备编号：" prop="number" label-width="100px">
          <el-input
            v-model="claimForm.number"
            autocomplete="off"
          ></el-input>
         
        </el-form-item>
  
        <el-form-item label="设备位置：" prop="address" label-width="100px">
          <el-input
            v-model="claimForm.address"
            autocomplete="off"
          ></el-input>
         
        </el-form-item>
       
       
       
        <el-form-item label="项目：" prop="projectid" label-width="100px">
          <el-select v-model="claimForm.projectid" clearable filterable placeholder="请选择项目" >
          <el-option
            v-for="item in selectData"
            :key="item.projectid"
            :label="item.projectName"
            :value="item.projectid" />
        </el-select>
        </el-form-item>
      
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm1('claimForm')">取 消</el-button>
        <el-button type="primary" @click="ClaimForm('claimForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "admin",
  data() {
    return {
      dialogVisible: false,
      dialogClaim: false,
      selectData: [],
      tableData: [],
      editForm: {},
      claimForm: {},
      editFormRules: {
        number: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
        type: [{ required: true, message: "请输入设备类型", trigger: "blur" }],
        model: [
          { required: true, message: "请输入设备联网类型", trigger: "blur" },
        ],
        projectid: [
          { required: true, message: "请输入所属项目", trigger: "blur" },
        ],
        status: [{ required: true, message: "请选择状态", trigger: "blur" }],
        manufactor: [
          { required: true, message: "请选择设备品牌厂商", trigger: "blur" },
        ],
      },
      claimFormRules: {
        number: [
          { required: true, message: "请输入设备编号", trigger: "blur" },
        ],
        address: [
          {
            required: true,
            message:
              "填写该设备投放位置的详细地址，比如：A栋503，方便日后维护找设备用",
            trigger: "blur",
          },
        ],
        projectid: [
          { required: true, message: "请输入所属项目", trigger: "blur" },
        ],
      },
      formInline: {
        user: "",
        region: "",
      },
      total: 0,
      size: 10,
      current: 1,
      /// 直接使用vue导出信息
       json_fields: {
            
            '编号':'number',
            '厂商':'manufactors',
            '项目':'projectName',
            '设备类型':'types',
            '联网状态':'models',
            '状态':'status',
            '位置':'address',
            // 'Complete name': 'name',
            // 'City': 'city',
            // 'Telephone': 'phone.mobile',
            // 'Telephone 2' : {
            //     field: 'phone.landline',
            //     callback: (value) => {
            //         return `Landline Phone - ${value}`;
            //     }
            // },
        },
    };
  },
  created() {
    this.selectDataMethod();
   
  },
  methods: {
    /*Excel上传成功！*/
    upload_success(file, fileList) {
      const h = this.$createElement;
      this.$notify({
        type: "success",
        title: "导入成功",
        message: h("p", null, [
          h("i", { style: "color: teal" }, file),
          h("span", null, " 成功导入！"),
        ]),
      });
      //异步刷新
      this.reload();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // exportData() {
    //         // const headers = { 'Content-Type': 'application/octet-stream' }
    //         this.$axios.post('/tFacilityBase/download',{},
    //           { responseType: 'blob' }).then((res) => {
    //           const link = document.createElement('a')
    //           const blob = new Blob([res], { type: 'application/vnd.ms-excel'})
    //           link.style.display = 'none'
    //           link.href = URL.createObjectURL(blob)
    //           link.download = '用户列表.xlsx'
    //           document.body.appendChild(link)
    //           link.click()
    //           document.body.removeChild(link)
    //         })
    //      },
    exportData() {
      // window.open('/tFacilityBase/download');
      this.$axios
        .post("/tFacilityBase/download")
        .then((res) => {
          this.$message({
            showClose: true,
            message: "导出成功",
            type: "success",
          });
        })
        .catch(function (error) {
          console.log("出错了");
        });
    },
    // 打开编辑设备信息的弹出框
    handleClick(row) {
      console.log(row);
      (this.dialogVisible = true),
        (this.editForm = {
          id: row.id,
          number: row.number,
          model: row.models,
          models: row.model,
          type: row.types,
          types: row.type,
          projectid: row.projectid,
          status: row.status,
          manufactor: row.manufactors,
          manufactors: row.manufactor,
        });
    },
    /// 删除设备基础信息
    handleDelete(id){
        this.$axios.get("/tFacilityBase/delete/"+id).then(res => {
                  this.$message({
                    showClose: true,
                    message: '恭喜你，删除操作成功',
                    type: 'success',
                    onClose:() => {
                     this.getFacilityList();
                    }
                  });
                })
    },
    handleSizeChange(val) {
      console.log(`每页条` + val);
      this.size = val;
      this.getFacilityList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ` + val);
      this.current = val;
      this.getFacilityList();
    },
    // 用户信息编辑的一个取消
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
      this.dialogClaim = false;
      this.editForm = {};
      this.claimForm = {};
    },
    resetForm1(formName) {
      this.$refs[formName].resetFields();

      this.dialogClaim = false;

      this.claimForm = {};
    },
    // 关闭用户信息框
    handleClose() {
      this.resetForm("editForm");
    },
    handleClaim() {
      this.resetForm1("claimForm");
    },
    // 查询全部的项目信息
    selectDataMethod() {

      this.$axios.get("/sys/userInfo").then(resOne => {
					
					this.userInfo = resOne.data.data
          //console.log("--------------------")
          //console.log(resOne.data.data);
          if(resOne.data.data.Projecttrue){
              this.$axios
              .get("/tProjectBase/list", {
                params: {
                  current: 0,
                  size: 0,
                },
              })
              .then((res) => {
               // console.log(res.data.data);
                this.selectData = res.data.data;
              });
          }
          else{
             this.selectData = [{
               "projectid":resOne.data.data.projectid,
               "projectName":resOne.data.data.projectname
             }];
             this.formInline.project=resOne.data.data.projectid;
           // this.getFacilityList();
          }
           this.getFacilityList();
				})
     
    },
    //  条件查询设备信息

    getFacilityList() {

      this.$axios
        .get("/tFacilityBase/list", {
          params: {
            page: this.current,
            limit: this.size,
            type: this.formInline.type,
            model: this.formInline.model,
            math: this.formInline.math,
            projectid: this.formInline.project,
            address: this.formInline.address,
          },
        })
        .then((res) => {
          //console.log(res);
          this.tableData = res.data.data;

          this.total = res.data.count;
        });
    },
    ///  点击设备信息按钮 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //alert("表单验证成功")
          console.log(this.editForm);
          if (this.editForm.id) {
            this.$axios
              .get("/tFacilityBase/updata", {
                params: {
                  id: this.editForm.id,
                  number: this.editForm.number,
                  models: this.editForm.models,
                  types: this.editForm.types,
                  projectid: this.editForm.projectid,
                  status: this.editForm.status,
                  manufactors: this.editForm.manufactors,
                },
              })
              .then((res) => {
                if (res) {
                  this.$message({
                    showClose: true,
                    message: "恭喜你，项目操作成功",
                    type: "success",
                    onClose: () => {
                      this.dialogVisible = false;
                      this.getFacilityList();
                    },
                  });

                  //alert('success')
                } else {
                  alert("err");
                }
              });
          } else {
            this.$axios
              .post("/tFacilityBase/add", this.editForm)
              .then((res) => {
                console.log(res);
                if (res) {
                  this.$message({
                    showClose: true,
                    message: "恭喜你，项目操作成功",
                    type: "success",
                    onClose: () => {
                      this.dialogVisible = false;
                      this.getFacilityList();
                    },
                  });

                  //alert('success')
                } else {
                  alert("err");
                }
              });
          }
        } else {
          alert("err");
          return false;
        }
      });
    },
    //  设备认领提交信息
    ClaimForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //alert("success")
          console.log(this.claimForm);
          this.$axios
            .post("/tFacilityBase/claim", this.claimForm)
            .then((res) => {
              this.$message({
                showClose: true,
                message: "恭喜你，认领操作成功",
                type: "success",
                onClose: () => {
                  this.dialogVisible = false;
                  this.getFacilityList();
                },
              });
            });
        } else {
          alert("err");
        }
      });
    },
    //  点击搜索按钮
    onSubmit() {
      console.log("submit!");
      this.getFacilityList();
    },
    ///  点击设备编号，到一个具体的设备信息页面
    handleClicknumber(row) {
      this.$router.push({ path: "/facility/FacilityBase/" + row.number });
      console.log(row);
    },
    //点击一个项目名称，到一个具体的项目信息的页面
    handleClickProject(row) {
      this.$router.push({ path: "/sys/ProjectBser/" + row.projectid });
      console.log(row);
    },
  },
};
</script>

<style scoped>
</style>